<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>十二生肖</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="true" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <style>
        html{font-size: 117.188px;}
        html, body{-ms-touch-action: none;background: #e5e5e5;padding: 0;border: 0;margin: 0;height: 100%;}
        /* 横屏提示 */
        .float-landscape{position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999999;background: #211e2b;color: #FFF;visibility: hidden}
        .float-landscape .ico-landscape{display: inline-block;background: url() no-repeat;width: 1.61rem;height: .12rem;-webkit-background-size: 100% 100%;background-size: 100% 100%;position: absolute;left: 50%;top: 50%;margin: -.06rem 0 0 -.805rem;}
        @media(orientation:landscape){.float-landscape{visibility: visible;}}
        /* loading */
        .loading{width: 120px;height: 120px;position: fixed;left: 50%;top: 50%;margin: -90px 0 0 -60px;z-index: 99999998;border-radius: 5px;}
            .loading i{display: block;width: 50px;height: 50px;margin: 10px auto;-webkit-animation: loading_rotate 1.2s linear infinite;animation: loading_rotate 1.2s linear infinite;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
            .loading p{line-height: 50px;text-align: center;font-size: 14px;color: #7E7E7E;}
            @keyframes loading_rotate {
                0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
                100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
            }
            @-webkit-keyframes loading_rotate {
                0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
                100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
            }
    </style>
</head>

<body>
    <div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         data-entry-class="Main"
         data-orientation="portrait"
         data-scale-mode="fixedWidth"
         data-frame-rate="30"
         data-content-width="640"
         data-content-height="1136"
         data-multi-fingered="2"
         data-show-fps="false" data-show-log="false"
         data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
    </div>

    <!-- 横屏提示 start -->
    <div class="float-landscape">
        <i class="ico-landscape"></i>
    </div>
    <!-- 横屏提示 end -->

    <!-- 加载loading start -->
    <div class="loading" id="loading">
        <i></i>
        <p>正 在 加 载 ...</p>
    </div>
    <!-- 加载loading end -->

    <script>
        var loadScript = function (list, callback) {
            var loaded = 0;
            var loadNext = function () {
                loadSingleScript(list[loaded], function () {
                    loaded++;
                    if (loaded >= list.length) {
                        callback();
                    }
                    else {
                        loadNext();
                    }
                })
            };
            loadNext();
        };

        var loadSingleScript = function (src, callback) {
            var s = document.createElement('script');
            s.async = false;
            s.src = src;
            s.addEventListener('load', function () {
                s.parentNode.removeChild(s);
                s.removeEventListener('load', arguments.callee, false);
                callback();
            }, false);
            document.body.appendChild(s);
        };

        var xhr = new XMLHttpRequest();
        xhr.open('GET', './manifest.json?v=' + Math.random(), true);
        xhr.addEventListener("load", function () {
            var manifest = JSON.parse(xhr.response);
            var list = manifest.initial.concat(manifest.game);
            loadScript(list, function () {
                /**
                * {
                * "renderMode":, //Engine rendering mode, "canvas" or "webgl"
                * "audioType": 0 //Use the audio type, 0: default, 2: web audio, 3: audio
                * "antialias": //Whether the anti-aliasing is enabled in WebGL mode, true: on, false: off, defaults to false
                * "calculateCanvasScaleFactor": //a function return canvas scale factor
                * }
                **/
                egret.runEgret({ renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor:function(context) {
                    var backingStore = context.backingStorePixelRatio ||
                        context.webkitBackingStorePixelRatio ||
                        context.mozBackingStorePixelRatio ||
                        context.msBackingStorePixelRatio ||
                        context.oBackingStorePixelRatio ||
                        context.backingStorePixelRatio || 1;
                    return (window.devicePixelRatio || 1) / backingStore;
                }});
                egret.ImageLoader.crossOrigin = "anonymous";
            });
        });
        xhr.send(null);
    </script>
</body>

</html>